<template>
  <div>
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <span class="span"></span> 活动详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-input v-model="cardName" placeholder="会员卡号"></el-input>
      </el-col>
      <el-col :span="3">
        <el-input v-model="memberName" placeholder="会员姓名"></el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="selectValue" clearable placeholder="请选择">
          <el-option
            v-for="item in selectOption"
            :key="item.selectValue"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4.5">
        <div class="block">
          <el-date-picker v-model="dateValue" type="date" placeholder="选择日期"></el-date-picker>
        </div>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="searchlist()">查询</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="newDialogVisible = true">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <!-- table表格 -->
    <el-table :data="memberListData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="cardNum" label="会员卡号" width="180"></el-table-column>
      <el-table-column prop="name" label="会员姓名" width="80"></el-table-column>
      <el-table-column prop="birthday" label="会员生日"></el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <el-table-column prop="integral" label="可用积分" width="80"></el-table-column>
      <el-table-column prop="money" label="开卡金额" width="80"></el-table-column>
      <el-table-column prop="payType" label="支付类型" width="80">
        <template v-slot="scope">
          <p v-if="scope.row.payType == '1'">微信支付</p>
          <p v-if="scope.row.payType == '2'">现金</p>
          <p v-if="scope.row.payType == '3'">支付宝</p>
          <p v-if="scope.row.payType == '4'">银行卡</p>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="会员地址 "></el-table-column>
      <el-table-column label="操作 " width="180">
        <template v-slot="scope">
          <el-button @click="memberEndit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="getNowpage"
      :page-sizes="[8, 20, 30, 40]"
      :page-size="this.paramUser.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="memberData.total"
    ></el-pagination>
    <!-- //编辑框数据 -->
    <el-dialog title="会员编辑" :visible.sync="enditDialogVisible" width="60%">
      <el-form :model="enditMemberList" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model="enditMemberList.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" prop="name">
          <el-input v-model="enditMemberList.name"></el-input>
        </el-form-item>
        <el-form-item label="会员生日" prop="birthday">
          <el-date-picker v-model="enditMemberList.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="enditMemberList.phone"></el-input>
        </el-form-item>
        <el-form-item label="开卡金额" prop="money">
          <el-input v-model="enditMemberList.money"></el-input>
        </el-form-item>
        <el-form-item label="可用积分" prop="integral">
          <el-input v-model="enditMemberList.integral"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="payType">
          <el-input v-if="enditMemberList.payType== 1" v-model="payTypeList.one"></el-input>
          <el-input v-if="enditMemberList.payType== 2" v-model="payTypeList.two"></el-input>
          <el-input v-if="enditMemberList.payType== 3" v-model="payTypeList.three"></el-input>
          <el-input v-if="enditMemberList.payType== 4" v-model="payTypeList.four"></el-input>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input v-model="enditMemberList.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="getEnditMember(enditMemberList)">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- //新增数据框 -->
    <el-dialog title="会员编辑" :visible.sync="newDialogVisible" width="60%">
      <el-form
        :model="newMemberList"
        :rules="newMemberListRules"
        ref="ruleForm"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model="newMemberList.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" prop="name">
          <el-input v-model="newMemberList.name"></el-input>
        </el-form-item>
        <el-form-item label="会员生日" prop="birthday">
          <el-date-picker v-model="newMemberList.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="newMemberList.phone"></el-input>
        </el-form-item>
        <el-form-item label="开卡金额" prop="money">
          <el-input v-model="newMemberList.money"></el-input>
        </el-form-item>
        <el-form-item label="可用积分" prop="integral">
          <el-input v-model="newMemberList.integral"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="payType">
          <el-input v-model="newMemberList.payType"></el-input>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="newMemberList.address"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="getMemberList('ruleForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import memberApi from "@/api/member"; //封装的api接口
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      cardName: "", //会员卡号
      memberName: "", //会员姓名
      selectValue: "", //支付类型
      selectOption: [
        {
          value: "选项1",
          label: "现金"
        },
        {
          value: "选项2",
          label: "微信"
        },
        {
          value: "选项3",
          label: "支付宝"
        },
        {
          value: "选项4",
          label: "银行卡"
        }
      ], //支付类型数据
      dateValue: "", //日期
      memberData: [], //列表数据
      memberListData: [],
      paramUser: {
        pagenum: 1,
        pagesize: 6
      }, //用户列表参数配置
      enditDialogVisible: false, //用户编辑
      enditMemberList: {}, //编辑框数据
      newDialogVisible: false, //新增数据框开关
      newMemberList: {
        cardNum: "",
        name: "",
        birthday: "",
        phone: "",
        money: 0,
        integral: 0,
        payType: "",
        address: ""
      },
      // 编辑框中支付类型选项
      payTypeList: {
        one: "微信支付",
        two: "现金",
        three: "支付宝",
        four: "银行卡"
      },
      // 新增数据里面进行表单验证
      newMemberListRules: {
        cardNum: [
          { required: true, message: "请输入会员卡号", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入会员名称", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        money: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        integral: [
          { required: true, message: "请输入手机号", trigger: "blur" }
        ],
        address: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        payType: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        birthday: [{ required: true, message: "请输入手机号", trigger: "blur" }]
      }
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //api封装get请求会员列表数据
    getTableData() {
      memberApi.getMemberList().then(response => {
        console.log(response);
        this.memberData = response.data;
        console.log(this.memberData);
        this.newDialogVisible = false;
        this.getNowpage(1);
      });
    },
    getNowpage(nowpage) {
      var start = (nowpage - 1) * this.paramUser.pagesize;
      var end = start + this.paramUser.pagesize; //所有数据
      console.log(start, end);
      this.memberListData = this.memberData.memberList.slice(start, end); //当前页面的数据
      console.log(this.memberListData);
    },
    //搜索数据
    searchlist() {
      memberApi.getSearch(this.cardName, this.memberName).then(res => {
        console.log(res);
        if (res.data.message != "查询成功")
          return this.$message.error("查询数据失败");
        this.$message.success("查询数据成功");
        this.getTableData();
      });
    },
    //点击新增数据api封装getMemberAdd
    getMemberList(formName) {
      console.log(formName);
      this.$refs[formName].validate(valid => {
        if (valid) {
          memberApi
            .getMemberAdd(
              this.newMemberList.cardNum,
              this.newMemberList.name,
              this.newMemberList.phone
            )
            .then(res => {
              console.log(res.data.res);
              if (res.data.res.code !== 200)
                return this.$message.error("新增数据失败");
              this.$message.success("数据新增成功");
              this.newMemberList = "";
              this.getTableData();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    // api封装delMemberList删除列表数据
    del(row) {
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      })
        .then(() => {
          memberApi.delMeberList(row.id).then(res => {
            console.log(res.data.res.code);
            if (res.data.res.code !== 200)
              return this.$message.error("删除列表失败");
            this.$message.success("删除列表成功");

            this.getTableData();
          });
        })
        .catch(() => {
          this.$message.error("取消列表成功");
        });
    },
    // 编辑用户数据
    memberEndit(row) {
      console.log(row);
      this.enditMemberList = row;

      this.enditDialogVisible = true;
    },
    // 编辑框api封装
    getEnditMember(getEbditMember) {
      memberApi
        .getEbditMember(getEbditMember.cardNum, getEbditMember.name)
        .then(response => {
          console.log(response);
          if (response.data.code != 200)
            return this.$message.error("编辑数据失败");
          this.$message.success("编辑数据成功");
          this.enditDialogVisible = false;
          this.getTableData();
        });
    },
    // 重置
    reset() {
      if (
        this.cardNum != "" &&
        this.memberName != "" &&
        this.selectValue != "" &&
        this.dateValue
      ) {
        (this.cardName = ""),
          (this.memberName = ""),
          (this.selectValue = ""),
          (this.dateValue = "");
        this.$message.success("重置成功");
      } else {
        this.$message.error("会员卡号,会员姓名,支付类型,日期不能为空");
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableData();
    setTimeout(() => {
      this.getNowpage(1);
    }, 100);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.span {
  width: 5px;
  height: 4px !important;
  background: red;
  border: 1px solid red;
  margin-right: 10px;
}
.el-row {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>